<template>
	<view class="page user">
		<view class="user-title">访客信息登记</view>
		<form class="user-form">
			<view class="user-form-title">公司信息</view>
			<view class="cu-form-group margin-top">
				<view class="title">公司名称</view>
				<input type="text" v-model="companyData.name" disabled="true" />
			</view>
			<view class="cu-form-group ">
				<view class="title">纳税人识别号</view>
				<input type="text" v-model="companyData.code" disabled="true" />
			</view>
			<view class="cu-form-group ">
				<view class="title">公司地址</view>
				<input type="text" v-model="companyData.house_address" disabled="true" />
			</view>

			<view class="cu-form-group margin-top">
				<view class="title">开始日期</view>
				<picker mode="date" :value="start_date" start="2022-01-01" @change="
						e => {
							start_date = e.detail.value;
						}
					">
					<view class="picker">{{ start_date }}</view>
				</picker>
			</view>
			<view class="cu-form-group">
				<view class="title">开始时间</view>
				<picker mode="time" :value="start_time" start="09:01" end="21:01" @change="
						e => {
							start_time = e.detail.value;
						}
					">
					<view class="picker">{{ start_time }}</view>
				</picker>
			</view>
			<view class="cu-form-group margin-top">
				<view class="title">结束日期</view>
				<picker mode="date" :value="end_date" start="2022-01-01" @change="
						e => {
							end_date = e.detail.value;
						}
					">
					<view class="picker">{{ end_date }}</view>
				</picker>
			</view>
			<view class="cu-form-group">
				<view class="title">结束时间</view>
				<picker mode="time" :value="end_time" start="09:01" end="21:01" @change="
						e => {
							end_time = e.detail.value;
						}
					">
					<view class="picker">{{ end_time }}</view>
				</picker>
			</view>
			<view class="user-form-title">访客信息</view>
			<view class="cu-form-group-top margin-top">
				<view class="title">姓名</view>
				<input placeholder="请输入姓名" v-model="formData.real_name" disabled="true" />
			</view>
			<view class="cu-form-group-top">
				<view class="title">手机号</view>
				<input placeholder="请输入手机号" v-model="formData.mobile" disabled="true" />
			</view>
			<view class="cu-form-group-top">
				<view class="title">身份证</view>
				<input placeholder="请输入身份证" v-model="formData.id_card" disabled="true" />
			</view>
			<view class="padding"><button class="cu-btn block bg-blue margin-tb-sm lg"
					@click="handleSubmit">提交访客信息</button></view>
		</form>
	</view>
</template>

<script>
	import {
		setUserInfo,
		inviteCreate
	} from '@/api/user.js';
	import {
		getCompanyInfo
	} from '@/api/enterprise.js';
	import getUrlParams from '@/utils/getUrlParams.js';
	import QnCheckbox from '@/components/checkbox.vue';
	import QnSelect from '@/components/select/index.vue';
	export default {
		components: {
			QnCheckbox,
			QnSelect
		},
		data() {
			return {
				companyData: {},
				start_time: '01:01',
				start_date: '2022-01-01',
				end_time: '02:02',
				end_date: '2022-02-02',
				company_id: '',
				inviter: '',
				formData: {
					real_name: '',
					mobile: '',
					id_card: '',
					company_id: 1, //公司ID
					start_time: '', //生效时间
					end_time: '', //截止时间
					inviter: 1 //邀请人ID
				}
			};
		},
		computed: {
			userInfo() {
				return this.$store.state.userInfo;
			},
			isLogin() {
				if (this.$store.state.token) {
					return true;
				} else {
					return false;
				}
			},
			userData() {
				return {
					pCode: this.formData.live_province,
					cCode: this.formData.live_city,
					aCode: this.formData.live_area,
					sCode: this.formData.live_street,
					pName: this.formData.live_province_name,
					cName: this.formData.live_city_name,
					aName: this.formData.live_area_name,
					sName: this.formData.live_street_name
				};
			}
		},
		onLoad(query) {
			console.log('我访问到页面了', query);
			if (this.isLogin) {
				if (query && query.q) {
					let data = getUrlParams(decodeURIComponent(query.q));
					//获取公司ID
					if (data.company_id) {
						this.company_id = data.company_id;
					}
					//获取邀请人ID
					if (data.inviter) {
						this.inviter = data.inviter;
					}
					this.handleLoadCompany(data);
				} else if (query.company_id && query.inviter) {
					let data = query;
					//获取公司ID
					if (data.company_id) {
						this.company_id = data.company_id;
					}
					//获取邀请人ID
					if (data.inviter) {
						this.inviter = data.inviter;
					}
					this.handleLoadCompany(data);
				} else {
					uni.switchTab({
						url: '/pages/index/index'
					});
				}
			} else {
				this.$route('pages/login/login');
			}

		},
		onShow() {},
		methods: {
			handleLoadUserInfo() {
				setTimeout(() => {
					this.formData = this.userInfo;
					console.log('this.formData', this.formData);
				}, 1000);
			},
			/**
			 * 获取公司信息
			 */
			handleLoadCompany(data) {
				getCompanyInfo(data).then(response => {
					const {
						data
					} = response;
					this.companyData = data;
					this.handleLoadUserInfo();
					console.log('response', response);
				});
			},
			handleSubmit() {
				uni.showLoading({
					title: '提交信息'
				});
				let postData = {
					company_id: this.company_id,
					start_time: this.start_date + ' ' + this.start_time, //生效时间
					end_time: this.end_date + ' ' + this.end_time, //截止时间
					inviter: this.inviter
				}
				console.log("查看提交的", postData)
				inviteCreate(postData)
					.then(response => {
						const {
							data
						} = response;
						console.log('response', response);
						uni.hideLoading();
						uni.showToast({
							title: '申请成功',
							duration: 2000
						});
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/qrcode/qrcode'
							});
						}, 1500);
					})
					.catch(error => {
						console.log('error', error);
						uni.hideLoading();
						if (error.data && error.data.msg) {
							uni.showToast({
								title: error.data.msg,
								duration: 2000
							});
						} else {
							uni.showToast({
								title: '提交失败',
								duration: 2000
							});
						}
					});
			}
		}
	};
</script>

<style lang="scss">
	.page.user {
		.user-form {
			padding-bottom: 100rpx;
		}

		.user-title {
			font-size: 48rpx;
			font-weight: bold;
			padding-left: 30rpx;
		}

		.user-form-title {
			font-size: 38rpx;
			font-weight: bold;
			padding-left: 30rpx;
			line-height: 80rpx;
			padding-top: 28rpx;
		}
	}
</style>
